/*
 * @Author: hongbin
 * @Date: 2022-11-20 23:39:37
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-28 10:02:51
 * @Description:消息卡片
 */

import { FC, useCallback, useMemo, useState } from "react";
import styled from "styled-components";
import { INewsItem } from ".";
import { post } from "../../api";
import { useAuth } from "../../context/AuthProvide";
import { SocketManager } from "../../socket";
import { flexCenter } from "../../styled";
import { mongoIDToDate } from "../../utils";

interface IProps {
    news: INewsItem;
}

const NewsCard: FC<IProps> = ({ news: { _id, userName, content, userId } }) => {
    const { user, recordUserInformation } = useAuth();
    const [showUserInfo, setShowUserInfo] = useState(false);
    const isFriend = useMemo(() => user.friendsList?.map((info) => info.friendId).includes(userId), [user, userId]);
    const isSelf = useMemo(() => user._id === userId, [user, userId]);

    const addFriend = useCallback(async (params: { self: string; other: string }) => {
        const { data } = await post("/FriendsList/add", params);
        console.log("加好友：", data);
    }, []);

    const requestAddFriend = useCallback(() => {
        //TODO: server
        //local
        // const newInfo = { ...user };
        // newInfo.friendsList?.push(userId);
        // recordUserInformation(newInfo);

        /**
         * socket 通知对方
         */
        SocketManager.emit("requestAddFriend", {
            applicant: user._id,
            applicantName: user.name,
            respondent: userId,
        });

        // addFriend({ self: user._id!, other: userId });
    }, [user, userId]);

    return (
        <Container onMouseLeave={() => setShowUserInfo(false)}>
            <section>
                <span onClick={() => setShowUserInfo(true)}>
                    {userName}
                    {isFriend ? <p>好友</p> : null}
                    {isSelf ? <p style={{ background: "#021001" }}>自己</p> : null}
                </span>
                <code>{mongoIDToDate(_id).toLocaleDateString()}</code>
            </section>
            <span>{content}</span>
            {showUserInfo && !isSelf ? (
                <PopUp>
                    {!isFriend ? <button onClick={requestAddFriend}>+加好友</button> : null}
                    <button onClick={() => window.open(`${location.href}/homepage?id=${userId}`)}>查看信息</button>
                </PopUp>
            ) : null}
        </Container>
    );
};

export default NewsCard;

const PopUp = styled.div`
    position: absolute;
    top: 7%;
    left: 30%;
    width: 66%;
    background: #095f04;
    border-radius: 0.2vmax;
    padding: 0.2vmax;
    button {
        width: 100%;
    }
`;

const Container = styled.div`
    position: relative;
    width: calc(100% - 0.5vmax);
    background: #3aab24;
    padding: 1vmax;
    border-radius: 1vmax;
    margin: 0.5vmax 0;

    & > section {
        ${flexCenter};
        justify-content: space-between;
        font-size: 1vmax;
        span {
            cursor: pointer;
            color: #0d3d06;
            ${flexCenter};
            p {
                background: #17610c;
                color: #1db806;
                padding: 0.1vmax;
                font-size: 0.9vmax;
                border-radius: 0.2vmax;
                margin-left: 0.2vmax;
            }
        }
        code {
            font-size: 0.9vmax;
            color: #095406;
        }
    }
`;
